html,
body {
  margin: 0;
  width: 100%;
  background-color: #eff1f4;
}

header {
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
  font-weight: bold;
  box-shadow: 0 5px 15px rgba($color: #000000, $alpha: 0.2);
}

.container {
  display: flex;
  .left-nav {
    width: 250px;
    height: auto;
    display: flex;
    justify-content: flex-end;
    padding-top: 30px;
    margin-right: 10px;
    .list {
      position: fixed;
      top: 50%;
      list-style: none;
      padding: 0;
      margin: 0;
      transform: translateY(-50%);
      border-left: 2px solid gray;
      .item {
        position: relative;
        margin: 15px 0;
        line-height: 3;
        color: gray;
        padding-left: 15px;
        cursor: pointer;
        &:nth-child(1) {
          margin-top: 0;
        }
        &:last-child {
          margin-bottom: 0;
        }
        &.active {
          color: #d8152a;
          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: -2px;
            height: 100%;
            width: 2px;
            background-color: #d8152a;
          }
        }
      }
    }
  }
}

.content-wraper {
  flex: 1;
  section {
    width: calc(100% - 250px);
    height: 500px;
    margin: 15px 0;
    border-radius: 15px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
